AULA06 - Formatação CSS: layouts¶

Agenda¶

  • DOM
  • Box Model
  • Propriedades de Layout
  • Propriedade Display: Flex
  • CSS-Grid
  • Referências
  • Perguntas

1. Document Object Model (DOM)¶

  • Significa Document Object Model, Modelo de Objeto de Documento.
  • Ele define a estrutura lógica dos documentos e a maneira como um documento é acessado e manipulado.
  • A estrutura lógica é muito parecida com uma árvore.
  • Cada documento contém zero ou um nó do tipo doctype. Um nó do elemento raiz e zero ou mais comentários ou instruções de processamento; o elemento raiz serve como raiz da árvore de elementos do documento.

Figura 1: Exemplo estrutura DOM
Fonte: Autoria própria

2. Box Model padrão do CSS¶

  • O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML.
  • O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.
  • É uma propriedade que determina o tamanho final (altura e largura) dos elementos.

Figura 2: Exemplo Box model padrão do CSS
Fonte: Autoria própria
  • E o box model tradicional da especificação tem uma regra bastante confusa:
    • A propriedade element width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura).
    • Se você quiser que um elemento ocupe metade da página mas com uma borda de 10px, não funciona utilizar: 
#elemento {
        border: 10px solid #555;
        width: 50%;
}
  • O tamanho final do elemento terá 20px mais da metade do tamanho do pai.
  • Surge então a propriedade box-sizing que considera o tamanho final do elemento, considerando o padding e border.

2.1. Propriedades CSS de elementos¶

2.1.1. Propriedade box-sizing¶

  • Por padrão todos os elementos possuem o valor do box-sizing: content-box.

  • Valores possíveis:

    • border-box:
      • indica que o tamanho considerará até a borda do elemento (width = border + padding).
    • content-box:
      • indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).

  • Observação:

    • Os elementos em blocos, ocupam o máximo da largura e o mínimo de altura.
    • Os elementos em linha, ocupam o espaço do conteúdo. Quando se usa valores em %, os cálculos das larguras e alturas dos elementos são feitos em relação aos elementos pais.
    • As versões mais antigas do Firefox precisa do prefixo -moz- e, Chrome, Safari e Android, do -webkit-. 
/* Valor padrão */
#elemento {
    box-sizing: content-box;
}

#elemento {
    box-sizing: border-box;
}
  • Utilizando box-sizing: border-box;

Arquivo index.html

<!-- Arquivo index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>

Arquivo estilo.css

/* Arquivo css/estilo.css */  

/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;                           /* propriedade para cor de fundo */
  height: 600px;                                       /* propriedade para altura de conteúdo */
  width: 600px;                                        /* propriedade para largura de conteúdo */
  padding: 5px;                                        /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;                                        /* propriedade para largura do conteúdo */
  height: 100px;                                       /* propriedade para altura do conteúdo */
  box-sizing: border-box;                              /* propriedade para tamanho do conteúdo */
  border: 2px solid red;                               /* propriedade para borda do conteúdo */
  padding: 10px;                                       /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;                                        /* propriedade para margens ao redor do conteúdo */
  color: #000;                                         /* propriedade para cores do texto do conteúdo */
  font-weight: bold;                                   /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);         /* propriedade para sombra do conteúdo */
  background-color: #fff;                              /* propriedade para cor de fundo do conteúdo */
}

Figura 3: Exemplo Box model com a propriedade box-sizing: border-box
Fonte: Autoria própria

Analisando um dos elementos <div> com o atributo class="item"¶

  • border-box:
    • indica que o tamanho que será considerado até a borda do elemento (width = border + padding).
  • Uso do:
    • box-sizing: border-box;
    • width: 250px;
    • height: 100px;
  • Neste exemplo, a largura final do elemento será de 250px.

Figura 4: Representação do CSS no Box Model de um elemento (class="item")
Fonte: Autoria própria

2.1.2. Propriedade box-sizing: content-box;¶

  • Este é o padrão da propriedade.

Arquivo index.html

<!-- Arquivo index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>

Arquivo estilo.css

/* Arquivo css/estilo.css */  

/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;                      /* propriedade para cor de fundo */
  height: 600px;                                  /* propriedade para altura de conteúdo */
  width: 600px;                                   /* propriedade para largura de conteúdo */
  padding: 5px;                                   /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;                                   /* propriedade para largura do conteúdo */
  height: 100px;                                  /* propriedade para altura do conteúdo */
  box-sizing: content-box;                        /* propriedade para tamanho do conteúdo */
  border: 2px solid red;                          /* propriedade para borda do conteúdo */
  padding: 10px;                                  /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;                                   /* propriedade para margens ao redor do conteúdo */
  color: #000;                                    /* propriedade para cores do texto do conteúdo */
  font-weight: bold;                              /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);    /* propriedade para sombra do conteúdo */
  background-color: #fff;                         /* propriedade para cor de fundo do conteúdo */
}

Figura 5: Exemplo Box model com a propriedade box-sizing: content-box
.jpg)
Fonte: Autoria própria

Analisando um dos elementos <div> com o atributo class="item"¶

  • content-box:
    • indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default).
    • É o box model tradicional (width = element width).
  • Uso do:
    • box-sizing: content-box;
    • width: 250px;
    • height: 100px;
  • Neste exemplo, a largura final do elemento será 250px + 20px + 4px, totalizando 274px.

Figura 6: Representação do CSS no Box Model de um elemento (class="item")
Fonte: Autoria própria

2.1.3. Resumo Comparativo¶

  • A diferença é mínima ao visualizar as duas telas com os retângulos.

Figura 7: Resumo Comparativo

2.1.1 border-box 2.1.2 content-box
box-sizing: border-box; width: 250px; height: 100px;
box-sizing: content-box; width: 250px; height: 100px;
Largura Final = 250px
Largura Final = 250px + 20px + 4px = 274px




Fonte: Autoria própria Fonte: Autoria própria

3. Propriedades CSS de Layout¶

3.1. Propriedade margin¶

  • Para aprofundamento, consulte MDN Web Docs.
  • Margin:
    • É a distância a partir de cada um dos lados e de seus elementos vizinhos (ou às bordas do documento).
    • Aplica formatação do espaçamento do elemento em relação a seus adjacentes.
  • Valores possíveis: em, pixels, %.
  • Sintaxe: Podemos declarar de 4 maneiras:
/* Exemplo 1 */
#elemento {
    margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    margin: top right bottom left;
}

Figura 8: Exemplos utilizando a proproedade margin

Exemplo1 Exemplo2 Exemplo3 Exemplo4
margin: 10px; margin: 10px 8px; margin: 10px 8px 6px; margin: 10px 8px 6px 12px;
Fonte: Autoria própria Fonte: Autoria própria Fonte: Autoria própria Fonte: Autoria própria

3.2. Propriedade padding¶

  • Para aprofundamento, consulte MDN Web Docs.
  • Padding:
    • É a distância do elemento entre a borda e o seu conteúdo.
    • Aplica formatação do espaçamento ao redor do elemento em relação a sua borda.
  • Valores possíveis: em, pixels, %.
  • Sintaxe: Podemos declarar de 4 maneiras:
/* Exemplo 1 */
#elemento {
    padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    padding: top right bottom left;
}

Figura 8: Exemplos utilizando a propriedade padding

Exemplo1 Exemplo2 Exemplo3 Exemplo4
padding: 10px; padding: 10px 8px; padding: 10px 8px 6px; padding: 10px 8px 6px 12px;
Fonte: Autoria própria Fonte: Autoria própria Fonte: Autoria própria Fonte: Autoria própria

3.3. Propriedade position¶

  • Atualmente está sendo pouco usado. Porém, é utilizada nos frameworks de CSS.

  • Para aprofundamento, consulte MDN Web Docs.

  • A propriedade Position:
    • Indica ao navegador como ele tratará aquele elemento.
    • Aplica formatação à posição dos elementos.
  • Valores possíveis:
    • static:
      • Por default, os elementos são static.
      • Neste caso, não poderá definir a posição com left, right, top e bottom.
      • Onde o elemento estiver ele ficará.
    • relative:
      • Mantém na posição do fluxo normal do documento. Permitido definir a posição utilizando: top, left, right e bottom.
      • O elemento será posicionado aonde for designado, caso esteja sozinho. Caso contrário, será movido conforme valores atribuídos e demais elementos da página.
      • O posicionamento é sempre feito em relação os demias elementos da página. E os valores negativos, movem os elementos para sentidos inversos.
    • absolute:
      • Leva o elemento para fora do fluxo normal do documento, deixando um espaço pra trás.
      • Em um elemento definido desta forma, as coordenadas x, y são relativas a seu pai, posicionando em relação as bordas do elemento ou corpo, se não tiver elemento pai.
    • fixed:
      • Similar ao absoluto, porém, está travado na posição relativa ao viewport.
      • Quando usa scroll, os elementos fixos não serão movidos com o resto do documento.

3.4. Propriedade float¶

  • Atualmente está sendo pouco usado.
  • Para aprofundamento, consulte MDN Web Docs.

  • Ou ainda o artigo CSS: Truques para dominar a propriedade Float.

  • A propriedade Float é:

    • Uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo.
    • Mediante o arquivo html abaixo, aplicaremos algumas modificações para exemplificar o uso do float.
    • Aplica a formatação no elemento de forma a mostrar como ele interage com os demais.
  • Valores possíveis: left, right, none.
  • Sintaxe: float: left;
#elemento { 
    float: left;
}

Observação:¶

  • Para limpar o float, utiliza-se o valor clear.
  • clear: Limpa a formatação dos elementos que usaram float.
  • Valores possíveis: right, left, both ou none.

Arquivo index.html

<!-- Exemplo index.html sem float -->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Figura 9: Sem utilizar a propriedade float

  • É exibido as duas divisões uma sobre a outra. Com larguras de 250px cada.
Fonte: Autoria própria

Arquivo index.html

<!-- Exemplo index.html COM float -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }

/* Inclusão do FLOAT */
      .menu {
        float: left;
        width: 30%;
      }
      .conteudo {
        float: right;
        width: 60%;
      } 
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Observação:¶

  • É exibido as duas divisões uma ao lado da outra, porém, suas larguras foram modificadas para atender a condição de float, onde a classe menu passou a ter 30%, e a classe conteúdo 60%, totalizando 90% da largura total que é 600px.
  • Caso ultrapasse a largura do elemento pai, o elemento é automaticamente levado para a linha abaixo. Ou na direira ou na esquerda, dependendo da configuração do float.

Figura 10: Utilizando a propriedade float
Fonte: Autoria própria

3.5. Propriedade visibility¶

  • Parta aprofundamento, consulte MDN Web DOCS.
  • Ou ainda o artigo Visibility.
  • Visibility:
    • Pode ser usada para ocultar um elemento enquanto deixa o espaço onde ele teria sido criado.
    • Também utilizado para ocultar linhas e colunas de uma tabela.
  • Valores possíveis:
    • visible:
      • valor default, o elemento está sempre visível.
    • hidden:
      • esconde o elemento não modifica o layout. Os filhos serão visíveis se estiverem com o valor visible.
    • collapse:
      • as linhas ou colunas estão ocultas e o espaço que ocuparam é removido. 
/* Código omitido para facilitar a visualização da modificação */

.menu {
        float: left;
        width: 30%;
        visibility: hidden;
      }
/* Código omitido para facilitar a visualização da modificação */

Observação:¶

  • Neste caso, a classe menu, recebeu a propriedade visiility: hidden, o que fez ocultar a classe, porém permite a reserva do espaço, não sendo preeenchido com nada.
  • Caso utilize o valor collapse, então seu espaço poderá ser preenchido.

Figura 11: Utilizando a propriedade visibility
Fonte: Autoria própria

3.6. Propriedade outline¶

  • Para aprofundamento consulte, MDN Web Docs.
  • Ou ainda o artigo Outline.
  • Outline:
    • Aplica a formatação ao redor do elemento, externo às bordas.
  • Valores possíveis: de cor, de estilo de linha e espessura.
    • outline-color: valor;
    • outline-style: valor;
    • outline-width: valor; ou
    • outline: outline-color outline-style outline-width;

Exemplo:

#elemento {
    outline: rgba(0, 0,107,.65) solid 5px;
}
  • Ainda utilizando o exemplo anterior original sem a propriedade visibility, e modificando somente as classes: 
/* Código omitido para facilitar a visualização da modificação */

.menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
        outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */

Figura 12: Utilizando a propriedade outline: rgba(0, 0,107,.65) solid 5px
Fonte: Autoria própria

3.7. Propriedade display¶

  • Para aprofundamento, consulte MDN Web Docs.
  • Display:
    • Aplica a formatação de quebra antes ou depois, conforme os valores da propriedade.
  • Valores possíveis:
    • inline:
      • elementos exibidos em linha (valor default).
      • Por exemplo: as tags strong, a, em.
    • block:
      • é inserida uma quebra de linha antes e depois do elemento.
      • Por exemplo: as tags h1, h2, p. São exibidos em blocos.
    • none:
      • não exibe o elemento com efeitos avançados.
      • Se utilizar a propriedade visibility: hidden; você esta indicando ao browser para esconder o elemento.
    • inline-block:
      • área como bloco, e itens dentro como linha.
    • list-item:
      • igual a li.
    • flex:
      • cada conteúdo filho se comporta como se fosse um bloco.

4. Propriedades CSS de Layout¶

4.1. Flexbox¶

  • Para aprofundamento do assunto, consulte MDN Web Docs.
  • Leia também o Guia do Flexbox, CSS-Tricks.

Arquivo index.html

  • Este exemplo será utilizado daqui pra frente com algumas modificações.
<!-- Exemplo index.html -->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>

Arquivo estilo.css

/* Exemplo estilo.css */

#content {
  background-color: #2e86c1;
  height: 600px;  
  width: 600px;            
  padding: 5px;
}

.item {
  width: 100px; 
  height: 100px;  
  margin: 10px; 
  color: #000; 
  font-weight: bold; 
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); 
  background-color: #fff;   
}

Figura 13: Exemplo de estrutura básica sem formatação de display
Fonte: Autoria própria

4.1. Propriedade display: flex;¶

  • display: flex;:
    • Indica que o conteúdo dentro de um container se comportará como um bloco, um container.
  • Exemplo:
    • No arquivo estilo.css:
      • Inserir a propriedade display: flex no identificador #content.
      • Na Figura a seguir, é exibido como é visualizado no navegador.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade display: flex */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;
  padding: 5px;
  display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 14: Visualização com uso da propriedade display: flex
Fonte: Autoria própria

4.2. Propriedade flex-direction¶

  • flex-direction:
    • formata a direção do posicionamento dos elementos.

  • Valores possíveis:

    • row:
      • exibe os itens na direção de linha, da esquerda pra direita. (valor default).
    • column:
      • exibe os itens na direção de coluna de cima pra baixo.
    • row-reverse:
      • exibe os itens na direção de linha, da direita pra esquerda.
    • column-reverse:
      • exibe os itens na direção de coluna de baixo pra cima.
    • Exemplo:
      • No arquivo estilo.css:
        • Inserir a propriedade flex-direction: row no identificador #content.
        • E em seguida, altere para os demais valores para verificar como será visualizado no navegador.

  • Utilizando a propriedade flex-direction : row;

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 15: Visualização com uso da propriedade flex-direction: row
Fonte: Autoria própria
  • Utilizando a propriedade flex-direction : column;

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 16: Visualização com uso da propriedade flex-direction: column
Fonte: Autoria própria
  • Utilizando a propriedade flex-direction : row-reverse;

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 17: Visualização com uso da propriedade flex-direction: row-reverse
Fonte: Autoria própria
  • Utilizando a propriedade flex-direction : column-reverse;

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 18: Visualização com uso da propriedade flex-direction: row-reverse
Fonte: Autoria própria

4.3. Propriedade flex-wrap¶

  • flex-wrap:
    • determina se os elementos filhos aceitarão ou não uma quebra de conteúdo.
  • Valores possíveis:
    • *`wrap`*:
      • permitem a quebra de conteúdo filhos.
    • nowrap:
      • não permitem a quebra de conteúdo filhos (valor default).
    • wrap-reverse:
      • efetuam a quebra de conteúdo filhos e são exibidos de forma inversa (de baixo para cima).
  • Ou usar: 
#elemento { 
    flex-flow: flex-direction flex-wrap;
}
  • Utilizando a propriedade flex-wrap: nowrap;
  • No arquivo css:
    • Inserir a propriedade flex-wrap: nowrap no identificador #content.
    • Nesta situação, a visualização será idêntica ao que foi apresentado com a propriedade flex-direction: row. Pois os itens filhos são ajustados dentro do espaço para não quebrarem.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 19: Visualização com uso da propriedade flex-wrap: nowrap
Fonte: Autoria própria
  • Utilizando a propriedade flex-wrap: wrap;
  • No arquivo css:
    • Altere a propriedadede largura (width: 100px) na classe .item, para width: 250px.
    • Os itens filhos são redimensionados para caberem dentro do espaço definido.
    • Agora, altere a propriedade flex-wrap: nowrap no identificador #content para flex-wrap: wrap.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;     /* Modificado de nowrap para wrap */
}
.item {
  width: 250px;          /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Figura 20: Visualização com uso da propriedade flex-wrap: wrap
Fonte: Autoria própria
  • Utilizando a propriedade flex-wrap: wrap-reverse; e flex-direction: row;
  • No arquivo css:
    • Mantendo a propriedadede largura na classe .item, com width: 250px.
    • E em seguida, altere a propriedade flex-wrap para os demais valores.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Figura 21: Visualização com uso da propriedade flex-wrap: wrap-reverse e flex-direction: row
Fonte: Autoria própria
  • Utilizando a propriedade flex-wrap: wrap-reverse; e flex-direction: column-reverse;
  • No arquivo css:
    • Altere flex-direction: row para a propriedade flex-direction: column-reverse.
    • E a propriedade flex-wrap: wrap-reverse.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: column-reverse;  /* Modificado de wrap para column-reverse */
    flex-wrap: wrap-reverse;         /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                      /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Figura 22: Visualização com uso da propriedade flex-wrap: wrap-reverse e flex-direction: column-reverse
Fonte: Autoria própria

4.4. Propriedade justify-content¶

  • justify-content:
    • determina o posicionamento dos elementos na página.

  • Valores possíveis:

    • flex-start:
      • todos os elementos filhos são alinhados à esquerda, no topo (valor default).
    • flex-end:
      • todos os elementos filhos são alinhados à direita, sem inversão de ordem.
    • space-around:
      • os elementos filhos são distribuídos ao redor do elemento e de maneira uniforme dentro do espaço do container.
    • space-between:
      • os elementos filhos são distribuídos a partir do centro do container para as extremidades. Sem inserir margem na lateral.

  • Ou usar:

#elemento { 
    justify-content: flex-start;
}
  • Utilizando a propriedade flex-wrap: wrap; e flex-direction: row; e justify-content: flex-start;
  • No arquivo css:
    • Altere a propriedadede largura (width: 250px) na classe .item, para width: 100px.
    • Altere a propriedadede largura (width: 600px) no identificador #content, para width: 900px.
    • E a propriedade flex-direction para row.
    • E a propriedade flex-wrap para wrap.
    • E acrescente a propriedade justify-content: flex-start.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;                     /* Modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;              /* Modificado de column-reverse para row */
  flex-wrap: wrap;                  /* Modificado de wrap-reverse para wrap */
  justify-content: flex-start;      /* Inserido */
}

.item {
  width: 100px;                     /* modificado de 250px para 100px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Figura 23: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: flex-start
Fonte: Autoria própria
  • Utilizando a propriedade flex-wrap: wrap; e flex-direction: row; e justify-content: flex-end;
  • No arquivo css:
    • Altere a propriedadede justify-content: flex-start para justify-content: flex-end.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-end;  /* Modificado de flex-start para flex-end */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 24: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: flex-end
Fonte: Autoria própria
  • Utilizando a propriedade flex-wrap: wrap; e flex-direction: row; e justify-content: space-around;
  • No arquivo css:
    • Altere a propriedadede justify-content: flex-end para justify-content: space-around.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-around;  /* Modificado de flex-end para space-around */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 25: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: space-around
Fonte: Autoria própria
  • Utilizando a propriedade flex-wrap: wrap; e flex-direction: row; e justify-content: space-between;
  • No arquivo css:
    • Altere a propriedadede justify-content: space-around para justify-content: space-between.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-between;  /* Modificado de space-around para space-between */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 26: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: space-between
Fonte: Autoria própria

4.5. Propriedade align-items¶

  • align-items:
    • determina o posicionamento vertical dos elementos na página.
  • Valores possíveis:
    • flex-start:
      • exibe os elementos do container do topo para baixo, da esquerda para direita (valor default).
    • flex-end:
      • exibe os elementos do container de baixo pra cima, da esquerda para direita.
    • center:
      • centraliza todos os elementos.
    • strech:
      • exibe os elementos do topo para baixo, caso não tenha sido definido a altura dos elementos filhos do container, os mesmos são esticados até abaixo.
      • Para visualizar, remova a propriedade height: 100px da classe .item.
    • baseline:
      • é um alinhamento sensível ao conteúdo.
  • Ou usar: 
#elemento { 
    align-items: flex-start;
}
  • Utilizando a propriedade align-items: flex-start;
  • No arquivo css:
    • Altere a propriedadede justify-content: space-between; no identificador #content, para justify-content: flex-start;.
    • Retorne a largura do identificador #content de 900px para width: 600px.
    • E acrescente a propriedade align-items: flex-start.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;                              /* Modificado de 900px para 600px */ 
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;              /* Modificado de space-between para flex-start */
  align-items: flex-start;                  /* Inserido */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 27: Visualização com uso da propriedade align-items: flex-start
Fonte: Autoria própria
  • Utilizando a propriedade align-items: flex-end;
  • No arquivo css:
    • E altere a propriedade align-items: flex-start para align-items: flex-end;.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-end;                   /* Modificado de flex-start para flex-end */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 28: Visualização com uso da propriedade align-items: flex-end
Fonte: Autoria própria
  • Utilizando a propriedade align-items: center;
  • No arquivo css:
    • E altere a propriedade align-items: flex-end; para align-items: center;.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: center;                           /* Modificado de flex-end para center */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Figura 29: Visualização com uso da propriedade align-items: center
Fonte: Autoria própria
  • Utilizando a propriedade align-items: strech;
  • No arquivo css:
    • E altere a propriedade align-items: center; para align-items: strech;.
    • Remova a altura (height: 100px) da classe .item.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: strech;                           /* Modificado de center para strech */
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Figura 30: Visualização com uso da propriedade align-items: strech
Fonte: Autoria própria
  • Utilizando a propriedade align-items: baseline;
  • No arquivo css:
    • E altere a propriedade align-items: strech; para align-items: baseline;.
    • Mantenha a remoção da altura (height: 100px) da classe .item.

Arquivo index.html

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

Arquivo estilo.css

/* Arquivo estilo.css foi inserido a propriedade */

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: baseline;                            /* Modificado de strech para baseline */
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Figura 31: Visualização com uso da propriedade align-items: baseline
Fonte: Autoria própria

Existem outras propriedades, tal como align-content. Pesquise à respeito!¶

4.6. Propriedade order¶

  • order:
    • determina a ordem em que os elementos serão exibidos na página.
  • Valores possíveis:
    • valores inteiros.
  • Definindo uma pseudo-classe para cada um dos itens filhos. Teremos:
.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Importante:

  • Mantendo os valores padrões para as propriedades no identificador #content: 
display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  • Acrescente as pseudo-classes após a classe .item, o arquivo css ficará assim: 
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px; /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Figura 32: Visualização com uso da propriedade order
Fonte: Autoria própria

4.7. Propriedade flex-grow¶

  • flex-grow:
    • define a propriedade de crescer o elemento na página.
  • Valores possíveis:
    • O valor default é 0.
    • Não é possível valores negativos.
    • Se um item filho tiver o flex-grow: 2, ele ocupará duas vezes mais o espaço previsto para os outros elementos. E se o width dos elementos estiver definido, ele ocupará o espaço restante.

4.8. Propriedade flex-shrink¶

  • flex-shrink:
    • define a propriedade de encolher o elemento na página. Somente como informativo.
  • Valores possíveis:
    • Valores possíveis: valores inteiros.
    • O valor default é 1.
    • Não é possível valores negativos.

4.9. Propriedade `flex-basis¶

  • flex-basis:
    • define o width dos elementos antes de distribuir o restante para o flex-grow.
  • Valores possíveis:
    • Valores possíveis: valor em pixel.
    • O valor default é auto.
    • Se definir 0, os elementos não serão redimensionados.
  • Utilizando a propriedade flex-grow: 0; e flex-shrink: 1; e flex-basis: auto;
  • No arquivo css:
    • Na classe .item, definindo os valores default para as 3 propriedades e removendo width da classe .item**.
    • Acrescente a definição das pseudo-classes acrescentando flex-grow:2; na primeira pseudo-classe.
    • Teremos a classe .item da seguinte forma:

Arquivo estilo.css

.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: auto;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Figura 33: Visualização com uso da propriedade flex-grow e flex-shrink e flex-basis
Fonte: Autoria própria
  • Utilizando a propriedade flex-grow: 0; e flex-shrink: 1; e flex-basis: auto;
  • No arquivo css:
    • Na classe .item, modifique o valor da propriedade flex-basis: auto; para flex-basis: 65px;, assim os elementos serão definidos nesta largura e o espaço restante é usado nos elementos que foram configurados com a propriedade flex-grow.
    • Teremos a classe .item da seguinte forma:

Arquivo estilo.css

.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: 65px;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Observação:¶

  • Os itens 03, 04 e 02 possuem 65px da largura, enquanto que o item 01 expandiu no restante do espaço, pois possui o valor de flex-grow definido.

Figura 34: Visualização com uso da propriedade flex-grow e flex-shrink e flex-basis
Fonte: Autoria própria

4.10. Pratique¶

  • Para fixar o conteúdo, acesse:
    • Flexbox Adventure.
    • Flexbox with webflow.
    • Flexbox Defense.
    • Flexbox Froggy

5. Propriedades CSS de Layout¶

5.1. CSS-grid¶

  • Para ampliar o conhecimento, consulte o artigo CSS Grid: One Layout, Multiple Ways.

  • De acordo com [CSS-TRICKS], "o CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, o que significa que pode lidar com colunas e linhas, ao contrário do flexbox, que é amplamente um sistema unidimensional. Você poderá trabalhar com o Grid Layout aplicando regras CSS tanto a um elemento pai (que se torna o Grid Container) quanto aos filhos desse elemento (que se tornam Grid Items".

  • Para aprofundamento no assunto, sugiro a leitura do Guia completo do CSS-GRID.

6. Lista de Tags CSS para Flexbox¶

  • Criado por Joni Bologna.

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>